<template>
	<view class="page">
		<view class="title">课程标题：{{info.detail.course_ware_name || ''}}</view>
		<view class="tip">如需下载pdf原文件，请复制后打开浏览器粘贴进行访问</view>
		<view v-if="info.detail.file" v-for="(item, index) in info.detail.file" :key="index">
			<view class="tn-flex file_box">
				<view class="file">{{item.filepath}}</view>
				<tn-button type="primary" @click="copy(item.filepath)">复制</tn-button>
			</view>
			<view class="title">课程详情</view>
			<view class="images">
				<image v-for="(fileItem, fileIndex) in item.list" :key="fileIndex" @click="preview(index, fileIndex)"
					:src="fileItem.filepath" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import request from '@/util/request';
	import { onLoad } from '@dcloudio/uni-app';
	import { reactive, ref } from 'vue';

	const id = ref(0)
	const info = reactive<any>({
		detail: {}
	})

	onLoad((e : any) => {
		id.value = e.id

		getInfo()
	})

	const getInfo = () => {
		request.get('index/getInfo', { id: id.value }).then((res : any) => {
			info.detail = res.data
		}).catch((err : any) => {
			uni.showToast({
				title: err,
				icon: 'none'
			})
		})
	}

	const copy = (path : string) => {
		uni.setClipboardData({
			data: path
		})
	}

	const preview = (index : string, fileIndex : number) => {
		uni.previewImage({
			urls: info.detail.file[index].list.map((item : any) => item.filepath),
			current: fileIndex
		})
	}
</script>

<style lang="scss" scoped>
	.page {
		background: #fff;
		padding: 20rpx;
	}

	.title {
		border-bottom: 1rpx solid #eee;
		height: 80rpx;
		line-height: 80rpx;
	}

	.tip {
		background: var(--tn-color-red-light);
		color: var(--tn-color-red);
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
		margin-top: 20rpx;
		font-size: 22rpx;
	}

	.file_box {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
		padding: 20rpx 0;


		.file {
			flex: 1;
			overflow-wrap: break-word;
			word-break: break-all;
			margin-right: 20rpx;

			.images {
				width: 100%;
			}
		}
	}
</style>